<!-- 运输任务管理 -->
<template>
  <div class="dashboard-container transport-task customer-list-box">
    <div class="new-agency">我是页面3</div>
  </div>
</template>
<script>
import {
  transportList,
  transportListCount,
  cancelTransportTask,
  dispatchTransportTask,
} from "@/api/transport";
import { tripsList, carByTrips } from "@/api/transit";
import options from "@/api/transporttask.json";
import TabChange from "@/components/TabChange";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Treeselect from "@riophae/vue-treeselect";
import { getHMS } from "@/utils/index";
import { agencyList } from "@/api/institutions";
export default {
  components: {
    Treeselect,
    TabChange,
  },
  data() {
    return {
      formLabelWidth: "100px",
      dialogFormVisible: false,
      agencyOptions: [],
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children,
        };
      },
      taskDispatchStatus: [
        {
          id: 2,
          name: "已分配",
        },
        {
          id: 3,
          name: "待人工分配",
        },
      ],
      countAll: "", // 全部
      countOne: "", // 未分配
      countTwo: "", // 已分配
      countThree: "", // 进行中
      countFour: "", // 已完成
      countFive: "", // 超时
      showLoadingStatus: true,
      yddStatus: false,
      dfcStatus: true,
      ztStatus: false,
      showStatus: "",
      transportTaskStatus: "",
      transportTaskOptions: "",
      multipleSelection: [],
      tableKey: 0,
      dataList: [],
      total: null,
      listLoading: true,
      searchkey: false,
      taskSearchFormData: {
        page: 1,
        pageSize: 10,
        id: "",
        status: "",
        assignedStatus: "", // 任务分配状态
        loadingStatus: "", // 满载状态
        licensePlate: "", // 车牌号码
        startAgencyId: null, // 起始地机构
        endAgencyId: null, // 目的地机构
      },
      taskId: "",
      carId: "",
      carTripsId: "", // 车次id
      transportLineId: "", // 运输任务id
      transportOrderCount: "", // 运输任务数量
      lineList: "", // 车次列表
      loadingStatus: [
        // {
        //   id: 1,
        //   name: '半载'
        // },
        {
          id: 2,
          name: "满载",
        },
        {
          id: 3,
          name: "空载",
        },
      ],
      carList: [],
    };
  },
  // 创建完毕状态
  created() {
    this.transportTaskOptions = options;
    this.taskSearchFormData.status = Number(this.$route.query.status);
    this.showStatus = this.taskSearchFormData.status;
    var _this = this;
    this.initialDate();
    this.getAgencyList();
    // 键盘enter操作
    document.onkeydown = function (e) {
      var key = window.event.keyCode;
      if (key === 13) {
        _this.handleFilter(this.taskSearchFormData);
      }
    };
  },
  methods: {
    handleChangeLine(val) {
      this.carTripsId = val;
      this.getUseCar(this.carTripsId);
    },
    handleChange(val) {
      this.carId = val;
    },
    // 获取已启用并且为绑定过车次的车辆
    getUseCar(id) {
      carByTrips({ transportTripsId: id }).then((res) => {
        this.carList = res.data;
      });
    },
    cancelDisFn() {
      this.$refs["dataForm"].resetFields();
      this.dialogFormVisible = false;
      this.taskId = "";
      this.carId = "";
      this.transportLineId = "";
      this.carTripsId = "";
      this.carList = [];
    },
    // 获取运输任务下线路下的车次
    async getLine(id) {
      const { data: res } = await tripsList({ transportLineId: id });
      this.lineList = res;
    },
    // 给运输任务分配车辆
    handleTransportDispatchCar(row) {
      this.dialogFormVisible = true;
      this.taskId = row.id;
      this.transportOrderCount = row.transportOrderCount;
      this.transportLineId = row.transportLineId;
      this.getLine(this.transportLineId);
    },
    disaptchCar() {
      if (!this.carId) {
        return this.$message.error("请选择分配车辆");
      }
      this.dialogFormVisible = false;

      dispatchTransportTask({
        id: this.taskId,
        truckId: this.carId,
        transportTripsId: this.carTripsId,
      })
        .then((res) => {
          if (String(res.code) === "200") {
            this.$message.success("手动调整成功");
            this.initialDate();
            this.taskId = "";
            this.carId = "";
            this.transportLineId = "";
            this.carTripsId = "";
            this.carList = [];
          }
        })
        .catch((err) => {
          this.taskId = "";
          this.carId = "";
          this.transportLineId = "";
          this.carTripsId = "";
          this.carList = [];
          this.$message.error(err.msg || "手动调整失败");
        });
    },
    // 取消运输任务
    handleTransportCancel(id) {
      this.$confirm(`删除确认`, {
        title: "删除确认",
        message: "确认取消此运输任务吗？",
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "cancelTransportTask",
      })
        .then(() => {
          cancelTransportTask(id).then((res) => {
            if (res.code === 200) {
              this.$message.success("运输任务取消成功");
            } else {
              this.$message.error(res.msg || "运输任务取消失败");
            }
            this.initialDate();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    opens() {
      this.$refs.arrows.style.transform = "rotate(-180deg)";
    },
    closes() {
      this.$refs.arrows.style.transform = "rotate(0deg)";
    },
    // 获取起始/目的地机构列表数据
    async getAgencyList() {
      const { data: res } = await agencyList();
      // 获取数据给options
      this.agencyOptions = JSON.parse(res);
    },
    selectStartAgency(val) {
      this.taskSearchFormData.startAgencyId = val.id;
    },
    selectEndAgency(val) {
      this.taskSearchFormData.endAgencyId = val.id;
    },
    // 初始数据
    initialDate() {
      // 读取数据
      this.getUseCar();
      this.getTransportTask();
      this.getList();
    },
    // 获取运输任务列表
    selectGet(vId) {
      let obj = {};
      obj = this.options.find((item) => {
        return item.name === vId;
      });
      if (vId === "") {
        this.requestParametersLike.transportTaskStatus = "";
      } else {
        this.transportTaskStatus = obj.name;
        this.requestParametersLike.transportTaskStatus = obj.id;
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 查看运输任务详情
    handleTransportDetail(id) {
      this.$router.push({
        path: "/transport/task-detail",
        query: { id: id, type: "运输管理" },
      });
    },
    // 状态变更
    tabChange(activeIndex) {
      this.taskSearchFormData.status = activeIndex;
      this.getList();
    },
    // 获取运输任务统计
    async getTransportTask() {
      const { data: res } = await transportListCount();
      this.countOne = res[1] || 0;
      this.countTwo = res[2] || 0;
      this.countThree = res[3] || 0;
      this.countFour = res[4] || 0;
      this.countFive = res[5] || 0;
      this.countAll =
        Number(this.countOne) +
        Number(this.countTwo) +
        Number(this.countThree) +
        Number(this.countFour) +
        Number(this.countFive);
    },

    // 获取运输列表数据
    async getList() {
      // var _this = this
      this.listLoading = true;
      const params = { ...this.taskSearchFormData };
      params.planDeliveryTime = this.taskSearchFormData.planDeliveryTime
        ? getHMS(this.taskSearchFormData.planDeliveryTime)
        : "";
      if (params.status === 0) {
        delete params.status;
      }
      const { data: res } = await transportList(params);
      this.listLoading = false;
      // 获取数据给dataList
      this.dataList = res.items;
      // 已到达状态
      if (this.showStatus === 4) {
        this.showLoadingStatus = false;
        this.dfcStatus = false;
        this.yddStatus = true;
        this.ztStatus = false;
        // 待发车状态
      } else if (this.showStatus === 1) {
        this.showLoadingStatus = false;
        this.dfcStatus = true;
        this.ztStatus = false;
        this.yddStatus = false;
        // 在途状态
      } else if (this.showStatus === 2) {
        this.showLoadingStatus = false;
        this.ztStatus = true;
        this.dfcStatus = false;
        this.yddStatus = false;
      }
      // 获取总条数
      this.total = res.counts;
    },
    // 重置
    resetForm(taskSearchFormData) {
      // this.$refs[taskSearchFormData].resetFields()
      this.searchkey = false;
      this.taskSearchFormData = {
        page: 1,
        pageSize: 10,
        status: this.taskSearchFormData.status,
        id: "",
      };
      this.getList();
    },
    // 搜索信息
    handleFilter() {
      this.showStatus = this.taskSearchFormData.status;
      this.taskSearchFormData.page = 1;
      this.getList(this.taskSearchFormData);
      this.searchkey = true;
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.taskSearchFormData.pageSize = val;
      if (this.taskSearchFormData.page === 1) {
        this.getList(this.taskSearchFormData);
      }
    },
    // 进入某一页
    handleCurrentChange(val) {
      this.taskSearchFormData.page = val;
      this.getList();
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
}
.transport-task /deep/ .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}

/deep/ .el-dialog__body {
  padding-left: 40px !important;
}

// 下拉框
/deep/ .el-select {
  width: 100%;
}

/*定义滚动条轨道 内阴影+圆角*/
/deep/ .el-table--scrollable-x .el-table__body-wrapper {
  padding-bottom: 5px;
  margin-bottom: 5px;
  &::-webkit-scrollbar {
    height: 10px;
  }

  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(144, 147, 153, 0.3);
  }

  &::-webkit-scrollbar-track-piece {
    margin-right: 3px;
    margin-left: 3px;
  }
}
/deep/ .el-card {
  overflow: initial;
}
</style>
